<template>
  <div class="supplier-info-wrap">
    <el-form
      :class="{'mobile-el-form mobile-fly-detail': showMobilePage}"
      :label-position="showMobilePage?'left':'right'"
      label-width="110px"
      class="supplier-form height55">
      <el-row :gutter="20" :class="{'dividing': !showMobilePage}">
        <el-col :span="12">
          <el-form-item label="品牌名称：" prop="brandName" style="margin-bottom: 0px;">
            <ToolTip :content="orderDetail.brandName" placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品名称：" prop="productName" style="margin-bottom: 0px;">
            <ToolTip :content="orderDetail.productName" placement="top-start"/>
          </el-form-item>
        </el-col>
        <template v-for="(item,index) in orderDetail.queryOrderPlatforms">
          <el-col :key="index" :span="12">
            <el-form-item label="下单平台：" prop="platformName" style="margin-bottom: 0px;">
              <ToolTip :content="item.platformName" placement="top-start" />
            </el-form-item>
          </el-col>
          <el-col :key="index+'cooperationForm'" :span="12">
            <el-form-item label="合作形式：" prop="cooperationForm" style="margin-bottom: 0px;">
              <ToolTip :content="item.cooperationForm" placement="top-start"/>
            </el-form-item>
          </el-col>
        </template>
        <el-col :span="12">
          <el-form-item label="询单标签：" prop="tagName" style="margin-bottom: 0px;">
            <TagSelect v-model="orderDetail.tagName" mode="detail" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="期望档期：" prop="slotTime" style="margin-bottom: 0px;">
            <ToolTip :content="orderDetail.slotTime && orderDetail.slotTime.length === 2?`${format(orderDetail.slotTime[0],'YYYY/MM/DD')}-${format(orderDetail.slotTime[1],'YYYY/MM/DD')}`:''" placement="top-start"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="询单截止：" prop="queryOrderEndTime" style="margin-bottom: 0px;">
            <div class="flex-center">
              <ToolTip :content="format(orderDetail.queryOrderEndTime, 'YYYY/MM/DD HH:mm')" placement="top-start"/>
              <span v-if="orderDetail.status === 1 && orderDetail.autoComplete" style="color:#999; margin-left: 4px">(时间截止后自动完成询单)</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="附件：" prop="attachment" style="margin-bottom: 0px;">
            <div class="ellipsis">
              <FileShowList v-if="orderDetail.attachment && orderDetail.attachment.length" :file-list="orderDetail.attachment" style="max-width:100%;" is-show-single-file />
              <span v-else>--</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="链接：" prop="link" style="margin-bottom: 0px;">
            <flyLink
              :link-list="orderDetail.linkList"
              is-detail
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务号通知：" style="margin-bottom: 0px;">
            <div v-if="typeof orderDetail.enableNotification === 'number'">{{ orderDetail.enableNotification ? '开启' : '关闭' }}</div>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { format } from '@/filters/date';
import FileShowList from '@/components/CreateOrder/fileShowList';
import TagSelect from '@/components/Common/tagSelect';
import flyLink from '../components/flyLink';
import remarkInput from '../components/remarkInput';
import { handleRemark } from './tool';
import { mapState } from 'vuex';

export default {
  components: {
    FileShowList,
    TagSelect,
    flyLink,
    remarkInput
  },
  props: {
    orderDetail: {// 详情信息
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      format
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    queryOrderAdditionals() { // 根据version划分数组
      const arr = this.orderDetail.queryOrderAdditionals.slice(0);
      if (!arr || arr.length === 0) { return []; }
      const property = 'version';
      const obj = arr.reduce(function(memo, x) {
        if (!memo[x[property]]) { memo[x[property]] = []; }
        memo[x[property]].push(x);
        return memo;
      }, {});
      const newarr = Object.keys(obj).map(x => obj[x]);
      return newarr;
    }
  },
  methods: {
    handleRemark,
    handleRegion(region = '') {
      return region.replace(/,/g, '-');
    },
    // 跳转销售供应商
    toSupplierDetail(channelId) {
      if (channelId) {
        const url = this.$router.resolve({
          name: 'supplierManageDetail',
          params: { id: channelId }
        });
        window.open(url.href, '_blank');
      }
    }
  }
};
</script>
<style lang="scss" scoped>
  .supplier-info-wrap{
    .mobile-fly-detail {
      padding-left: 10px;
    }
    .supplier-form {
      .describe-wrap{
        display: flex;
        align-items: flex-start;
        flex-wrap: nowrap;
        .describe{
          white-space: nowrap;
          color: #FF4E5F;
          margin-right: 4px;
          .inner{
            max-width: 300px;
            color: #333;
          }
        }
      }
      & ::v-deep {
      .el-form-item {
        .el-form-item__label {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #999999 !important;
          opacity: 1;
          line-height: 32px;
        }
        }
        .el-form-item__content {
          font-size: 14px;
          font-family: PingFang SC;
          line-height: 32px;
          font-weight: 400;
          color: #333333;
          opacity: 1;
        }
      }
    }
    .dividing{
      &::v-deep {
        .el-col {
          .el-form-item__content {
            border-right: 1px solid #EBEEFD;
          }
          &:nth-child(2n) {
            .el-form-item__content {
              border-right: none;
            }
          }
          &:last-child {
            .el-form-item__content {
              border-right: none;
            }
          }
        }
      }
    }
  }
</style>
